<template>
  <div class="pa">
    <el-card shadow="never" class="aui-card--fill">
      <div class="crud__menu">
        <el-col :span="12">
          <el-form :inline="true">
            <el-form-item>
              <el-radio-group v-model="show">
                <el-radio-button label="1">{{ '查角色' }}</el-radio-button>
                <el-radio-button label="2">{{ '查人' }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" class="crud__right">
          <vxe-toolbar>
            <template v-slot:tools>
              <userDialogCondition ref="filter" :backFun="backFun" v-show="show !== '1'"></userDialogCondition>
              <!-- <el-button icon="el-icon-refresh" @click="refresh()" circle></el-button> -->
            </template>
          </vxe-toolbar>
        </el-col>
      </div>
      <div>
        <el-col :span="12">
          <vxe-table :loading="dataListLoading" :data="dataList" ref="xTable" auto-resize class="vxe-table-element"
            highlight-current-row :tree-config="{children:'children',trigger:'cell'}" @cell-click="cellClickEvent">
            <vxe-table-column type="index" width="50" fixed="left" align="center"></vxe-table-column>
            <vxe-table-column field="name" title="sysruledata.name" tree-node></vxe-table-column>
            <vxe-table-column field="value" title="sysruledata.value" width="100" align="center"></vxe-table-column>
            <vxe-table-column field="ruleSort" title="sysruledata.ruleSort" width="100" align="center">
              <template slot-scope="scope">
                {{ $getDataItem(ruleSortViewList, scope.row.ruleSort, "value").name }}
              </template>
            </vxe-table-column>
            <vxe-table-column field="sort" title="sysruledata.sort" width="80" align="center"></vxe-table-column>
            <vxe-table-column field="remark" title="sysruledata.remark"></vxe-table-column>
          </vxe-table>
        </el-col>
        <el-col :span="12">
          <privilegeAudit1 ref='privilegeAudit1' v-show="show === '1'" class="body_right">
          </privilegeAudit1>
          <privilegeAudit2 ref='privilegeAudit2' v-show="show !== '1'" class="body_right">
          </privilegeAudit2>
        </el-col>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss">
.pa .crud__menu {
  margin-bottom: 0px;
}
.pa .body_right {
  margin-left: 20px;
}
</style>

<script>
import mixinViewModule from '@/mixins/view-module'
import privilegeAudit1 from './dataScopeAudit1'
import privilegeAudit2 from './dataScopeAudit2'
import userDialogCondition from './dataScope-user-condition'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListIsPage: false,
        activatedIsNeed: false
      },
      ruleSortViewList: [],
      show: '1',
      ruleIds: '',
      dataForm: {}
    }
  },
  components: {
    privilegeAudit1, privilegeAudit2, userDialogCondition
  },
  activated () {
    this.getDataList()
  },
  methods: {
    refresh () {
      this.getDataList()
      this.refreshRuleIdList()
    },
    backFun (data) {
      let ref = this.getRef()
      ref.dataForm = {
        ...ref.dataForm,
        ...data
      }
      ref.getDataList()
    },
    // 获取当前加载的组件
    getRef () {
      if (this.show === '1') {
        return this.$refs.privilegeAudit1
      }
      if (this.show === '2') {
        return this.$refs.privilegeAudit2
      }
      return null
    },
    refreshRuleIdList () {
      this.ruleIds = this.dataListSelections.map(c => c.id).join(',')
      let child
      if (this.show === '1') {
        child = this.$refs.privilegeAudit1
        child.dataForm.ruleIds = this.ruleIds ? this.ruleIds : '-1'
        child.getDataList()
      } else {
        child = this.$refs.privilegeAudit2
        child.dataForm.ruleIds = this.ruleIds ? this.ruleIds : '-1'
        child.getDataList()
      }
    },
    cellClickEvent ($event) {
      let { row } = $event
      if (row.value === row.ruleSort) {
        return
      }
      this.dataListSelections = [row]
      this.refreshRuleIdList()
    },
    // // 切换组件
    // showPrivilegeAudit (who) {
    //   this.show = who
    // },
    getDataList () {
      this.dataListLoading = true
      this.getSortView().then((sort) => {
        this.getRuleDataList().then((rule) => {
          let data = []
          for (const item of sort) {
            item.ruleSort = item.value
            item.children = []
            for (const ritem of rule) {
              if (ritem.ruleSort === item.ruleSort) {
                item.children.push({ ...ritem })
              }
            }
            data.push({ ...item })
          }
          this.dataList = data
          this.$nextTick(() => {
            this.$refs.xTable.setAllTreeExpansion(true)
            this.dataListLoading = false
          })
        })
      })
    },
    getRuleDataList () {
      return new Promise((resolve, reject) => {
        this.$http.get(`/sys/sysruledata/list`).then(({ data: res }) => {
          if (res.code !== 0) {
            reject(new Error())
            return
          }
          resolve(res.data)
        }).catch(() => {
          reject(new Error())
        })
      })
    },
    getSortView () {
      return new Promise((resolve, reject) => {
        this.$http.get(`/sys/sysRuleSort/list`).then(({ data: res }) => {
          if (res.code !== 0) {
            reject(new Error())
            return
          }
          this.ruleSortViewList = res.data
          resolve(res.data)
        }).catch(() => {
          reject(new Error())
        })
      })
    }
  }
}
</script>
